import Vue from 'vue'
import {
	getStore,
	setStore
} from "@/utils/storage"
import {
	SIDEBAR_TYPE,
	TOGGLE_DEVICE,
	TOGGLE_NAV_THEME,
	TOGGLE_LAYOUT,
	TOGGLE_FIXED_HEADER,
	TOGGLE_FIXED_SIDEBAR,
	TOGGLE_CONTENT_WIDTH,
	TOGGLE_HIDE_HEADER,
	TOGGLE_COLOR,
	TOGGLE_WEAK,
	TOGGLE_MULTI_TAB,
	// i18n
	APP_LANGUAGE,
	TOGGLE_MOBILE_TYPE
} from '../mutation-types'
import {
	loadLanguageAsync
} from '@/locales'

const App = {
	state: {
		sideCollapsed: true,
		device: 'desktop',
		isMobile:false,
		theme: 'dark',
		layout: 'sidemenu',
		contentWidth: 'Fluid',
		multiTab: true,
		fixedHeader: true,
		fixSiderbar: true,
		autoHideHeader: false,
		primaryColor: '#00BEC5',
		weak: false,
		lang: 'zh-CN',
		sidebar: {
			opened: !+getStore('sidebarStatus'),
			withoutAnimation: false
		},
	},
	mutations: {
		[SIDEBAR_TYPE]: (state, type) => {
			state.sideCollapsed = type
			Vue.ls.set(SIDEBAR_TYPE, type)
		},
		[TOGGLE_MOBILE_TYPE]: (state, isMobile) => {
		  state.isMobile = isMobile
		},
		[TOGGLE_DEVICE]: (state, device) => {
			state.device = device
		},
		[TOGGLE_NAV_THEME]: (state, theme) => {
			console.log("有值吗" + theme)
			state.theme = theme
			//Vue.ls.set(TOGGLE_NAV_THEME, theme)
			setStore('theme', theme)
		},
		[TOGGLE_LAYOUT]: (state, mode) => {
			state.layout = mode
			//Vue.ls.set(TOGGLE_LAYOUT, mode)
			setStore('layout', mode)
		},
		[TOGGLE_FIXED_HEADER]: (state, mode) => {
			state.fixedHeader = mode
			setStore('fixedHeader', mode)
			//Vue.ls.set(TOGGLE_FIXED_HEADER, mode)
		},
		[TOGGLE_FIXED_SIDEBAR]: (state, mode) => {
			state.fixSiderbar = mode
			setStore('fixSiderbar', mode)
			// Vue.ls.set(TOGGLE_FIXED_SIDEBAR, mode)
		},
		[TOGGLE_CONTENT_WIDTH]: (state, type) => {
			console.log("有值吗" + type)
			state.contentWidth = type
			//Vue.ls.set(TOGGLE_CONTENT_WIDTH, type)
			setStore('contentWidth', type)
		},
		[TOGGLE_HIDE_HEADER]: (state, type) => {
			state.autoHideHeader = type
			Vue.ls.set(TOGGLE_HIDE_HEADER, type)
		},
		[TOGGLE_COLOR]: (state, color) => {
			state.primaryColor = color
			setStore('primaryColor', color)
			// Vue.ls.set(TOGGLE_COLOR, color)
		},
		[TOGGLE_WEAK]: (state, mode) => {
			state.weak = mode
			Vue.ls.set(TOGGLE_WEAK, mode)
		},
		[TOGGLE_MULTI_TAB]: (state, bool) => {
			state.multiTab = bool
			//Vue.ls.set(TOGGLE_MULTI_TAB, bool)
			setStore('multiTab', bool)
		},
		[APP_LANGUAGE]: (state, lang) => {
			console.log('lang', lang)
			state.lang = lang
			Vue.ls.set(APP_LANGUAGE, lang)
		},

		TOGGLE_SIDEBAR: state => {
			if (state.sidebar.opened) {
				setStore('sidebarStatus', 1)
			} else {
				setStore('sidebarStatus', 0)
			}
			state.sidebar.opened = !state.sidebar.opened
			state.sidebar.withoutAnimation = false
		},
		CLOSE_SIDEBAR: (state, withoutAnimation) => {
			setStore('sidebarStatus', 1)
			state.sidebar.opened = false
			state.sidebar.withoutAnimation = withoutAnimation
		},
	},
	actions: {
		setLang({
			commit
		}, lang) {
			return new Promise((resolve, reject) => {
				commit(APP_LANGUAGE, lang)
				loadLanguageAsync(lang).then(() => {
					resolve()
				}).catch((e) => {
					reject(e)
				})
			})
		},
		ToggleSideBar: ({
			commit
		}) => {
			commit('TOGGLE_SIDEBAR')
		},
		CloseSideBar({
			commit
		}, {
			withoutAnimation
		}) {
			commit('CLOSE_SIDEBAR', withoutAnimation)
		},
		ToggleColor({
			commit
		}, color) {
			commit('TOGGLE_COLOR', color)
		},
		ToggleWeak({
			commit
		}, weakFlag) {
			commit('TOGGLE_WEAK', weakFlag)
		},
		ToggleMultiTab({
			commit
		}, bool) {
			commit('TOGGLE_MULTI_TAB', bool)
		},
		ToggleNavTheme({
			commit
		}, theme) {
			console.log(theme)
			commit('TOGGLE_NAV_THEME', theme)
		},
		ToggleContentWidth({
			commit
		}, type) {
			commit('TOGGLE_CONTENT_WIDTH', type)
		},


	}
}

export default App
